<template>
	<div>
		<el-form ref="form" :model="form" :rules="rules" label-width="120px">
			<el-form-item label-width="0">
				<el-alert show-icon>
					确认转账后，资金将直接打入对方账户，无法退回。
				</el-alert>
			</el-form-item>
			<el-form-item label="付款账户：">
				{{ infoData.payAccount }}
			</el-form-item>
			<el-form-item label="收款账户：">
				{{ infoData.gatheringAccount }}
			</el-form-item>
			<el-form-item label="收款人姓名：">
				{{ infoData.gatheringName }}
			</el-form-item>
			<el-form-item label="转账金额：">
				<strong>
					{{ infoData.price }}
				</strong>
			</el-form-item>
			<el-form-item label="支付密码：" prop="password">
				<el-input v-model="form.password" type="password" />
			</el-form-item>
		</el-form>
		<div class="pay-button-group">
			<el-button type="primary" :loading="loading" @click="handleSubmit">
				提交
			</el-button>
			<el-button @click="handlePrev">上一步</el-button>
		</div>
	</div>
</template>
<script>
	export default {
		props: {
			infoData: {
				type: Object,
				default: () => {
					return {}
				},
			},
		},
		data() {
			return {
				form: {
					password: '123456',
				},
				rules: {
					password: [{
						required: true,
						message: '请输入支付密码',
						trigger: 'blur'
					}, ],
				},
				loading: false,
			}
		},
		methods: {
			handleSubmit() {
				this.$refs.form.validate((valid) => {
					if (valid) {
						this.loading = true
						setTimeout(() => {
							this.$emit('change-step', 3)
							this.loading = false
						}, 2000)
					} else {
						this.loading = false
					}
				})
			},
			handlePrev() {
				this.$emit('change-step', 1)
			},
		},
	}
</script>
<style lang="scss" scoped>
	.pay-button-group {
		display: block;
		margin: 20px auto;
		text-align: center;
	}
</style>
